<template>
  <transition name="fade"
    ><dl ref="menuRef" v-show="showMenu" class="thuComment-menu">
      <dt v-show="showDelete" @click="openDialog(0)">删除</dt>
      <dt v-show="showReplay" @click="openDialog(1)">回复</dt>
    </dl></transition
  >
  <template v-if="isMounted"
    ><confirm-dialog
      to="#dynamic"
      v-model="showConfirm"
      width="60%"
      title="删除评论"
      :isLoading="isLoading"
      @confirm="deleteComment"
      ><p>确定删除该条评论？</p></confirm-dialog
    >
    <edit-comment
      v-model="showCommentDialog"
      :title="`回复@${commenteder.remark}`"
      confirmText="回复"
      :dynamic-id="dynamicId"
      :comment-id="commentId"
      :commenter="{
        userId: user.userId,
        remark: user.nickName,
      }"
      :commenteder="commenteder"
      @comment="comment"
    ></edit-comment
  ></template>
</template>

<script lang="ts" setup>
import { ref, nextTick, onMounted } from "vue";
import { useDynamicPinia } from "@/pinia/dynamic";
import { useUserPinia } from "@/pinia/user";
import { ElMessage } from "element-plus";
import editComment from "./editComment.vue";
import { storeToRefs } from "pinia";
import confirmDialog from "@/components/confirmDialog.vue";

const emits = defineEmits<{
  (e: "deleteComment", commentId: string, dynamicId: string): void;
  (
    e: "comment",
    payload: {
      info: DynamicCommenter & { commentContent: string };
      commentId: string;
      dynamicId: string;
    }
  ): void;
}>();

const dynamicStore = useDynamicPinia();
const { user } = storeToRefs(useUserPinia());

/**
 * 是否显示操作评论的菜单
 */
const showMenu = ref<boolean>(false);
/**
 * 给操作菜单一个ref属性
 */
const menuRef = ref<any>();
/**
 * 是否正在删除或者回复评论
 */
const isLoading = ref<boolean>(false);
/**
 * 当前操作的评论的id值
 */
const commentId = ref<string>("");
/**
 * 当前操作的评论对应的动态id值
 */
const dynamicId = ref<string>("");
/**
 * 是否显示删除按钮
 */
const showDelete = ref<boolean>(false);
/**
 * 是否显示删除按钮
 */
const showReplay = ref<boolean>(false);
/**
 * 被回复人的信息
 */
const commenteder = ref<Commenter>({
  userId: "",
  remark: "",
});

/**
 * 判断用户所点击的元素是否符合标准
 */
const judgeClick_comment = (e: Event) => {
  const target: HTMLElement = e.target as HTMLElement;
  if (!menuRef.value?.contains(target)) {
    showMenu.value = false;
    document.removeEventListener("click", judgeClick_comment);
  }
};

// 打开菜单
const openMenu = (payload: {
  commentid: string;
  e: MouseEvent;
  isDelete: boolean;
  dynamicid: string;
  commenteder: Commenter;
  showreplay: boolean;
}) => {
  const {
    commentid,
    e,
    isDelete,
    dynamicid,
    commenteder: commentederItem,
    showreplay,
  } = payload;
  if (!isLoading.value) {
    showDelete.value = isDelete;
    showReplay.value = showreplay;
    if (!showMenu.value) {
      showMenu.value = true;
      document.addEventListener("click", judgeClick_comment);
    }
    commentId.value = commentid;
    dynamicId.value = dynamicid;
    commenteder.value = { ...commentederItem };
    const y: number = e.clientY;
    const x: number = e.clientX;
    nextTick(() => {
      const rect = menuRef.value?.parentNode.getBoundingClientRect()!;
      const hei: number = menuRef.value.offsetHeight;
      const wid: number = menuRef.value.offsetWidth;
      const toBottom: number = rect.y + rect.height - y;
      const toLeft: number = rect.x + rect.width - x;
      menuRef.value.style.cssText += `top: ${
        toBottom >= hei ? y - rect.y : y - rect.y - hei
      }px; left: ${toLeft >= wid ? x - rect.x : x - rect.x - wid}px`;
    });
  }
};

/**
 * 是否显示确认对话框
 */
const showConfirm = ref<boolean>(false);

// 打开对话框
const openDialog = (type: 0 | 1) => {
  showMenu.value = false;
  type === 0 ? (showConfirm.value = true) : (showCommentDialog.value = true);
};

// 删除评论
const deleteComment = () => {
  isLoading.value = true;
  dynamicStore
    .commentDynamicDelete({
      dynamicId: dynamicId.value,
      commentId: commentId.value,
    })
    .then((code: number) => {
      isLoading.value = false;
      if (code === 1) {
        showConfirm.value = false;
        // 当该用户是在好友动态里面评论里面删除评论时
        emits("deleteComment", commentId.value, dynamicId.value);
      } else
        ElMessage({
          type: "error",
          duration: 1500,
          message: "操作失败",
        });
    })
    .catch(() => {
      isLoading.value = false;
      ElMessage({
        type: "error",
        duration: 1500,
        message: "操作失败",
      });
    });
};

/**
 * 当该用户是在好友动态里面回复评论
 */
const comment = (payload: {
  info: DynamicCommenter & { commentContent: string };
  commentId: string;
  dynamicId: string;
}) => emits("comment", payload);

/**
 * 是否显示回复评论对话框
 */
const showCommentDialog = ref<boolean>(false);

defineExpose({
  openMenu,
  showMenu,
});

/**
 * 是否开始挂载绝对定位元素(用到了teleport组件)
 */
const isMounted = ref<boolean>(false);

onMounted(() => (isMounted.value = true));
</script>

<style lang="scss" scoped>
.thuComment {
  &-menu {
    @include opearMenu(1001, 13px);

    & > dt {
      padding-right: 25px;
      padding-left: 15px;
    }
  }
}
</style>
